<template>
	<view class="pages">
		<view style="position: fixed;left:0;right:0;top:0">
			<u-tabs :list="tab_list" @change="click" :current="current"
				:itemStyle="{height:'92rpx',fontSize:'28rpx',width:'188rpx'}" lineColor="#111111" lineWidth="40"
				lineHeight="6" :activeStyle="{color:'#111111'}"></u-tabs>
			<view class="collapse  u-flex-y-center">
				<view class="collapse_item u-flex" @click="statement('报表选择')">
					<text>{{statement_list[picker_index].name}}</text>
					<view class="arrow-icon">
						<image src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/down.png"></image>
					</view>
				</view>
				<view class="collapse_item u-flex" @click="data_open()">
					<text>{{time}}</text>
					<view class="arrow-icon">
						<image src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/down.png"></image>
					</view>
				</view>
				<view class="collapse_item u-flex" v-if="current==2" @click="statement('恋爱表')">

					<text v-if="tab_list[current]['formData'].type==1">恋爱了</text>
					<text v-else-if="tab_list[current]['formData'].type==2">分手了</text>
					<view class="arrow-icon">
						<image src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/down.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="main" v-for="(it,u_index) in tab_list" :key="u_index" v-if="u_index==current">

			<view class="table_item u-flex-between u-flex" v-for="(item,index) in it.list" :key="index"
				v-if="current==0">
				<text>ID:{{item.id}}@{{item.superiorUid}}</text>
				<text>询问次数：{{item.inquiryNum}}</text>

			</view>
			<view class="table_item_two" v-for="(item,index) in it.list" :key="index" v-if="current==1">

				<view class="u-flex-between u-flex item-title">
					<text>红娘{{item.id}}</text>
					<text>总计:{{item.total}}个</text>
				</view>

				<view class="u-flex u-flex-between item-bottom">
					<view class="u-flex-column item-center" v-for="(i,idx) in item.member" :key="idx">
						<text>{{i.value}}</text>
						<text>{{i.name}}</text>
					</view>
				</view>
			</view>

			<view class="table_item u-flex-between u-flex" v-for="(item,index) in it.list" :key="index"
				v-if="current==2||current==3">
				<text>ID:{{item.userId}}@{{item.userIdMatchUid}}</text>
				<text>ID:{{item.inquiryUserId}}@{{item.inquiryUserIdMatchUid}}</text>
				<text class="gray">{{item.updatedAt}}</text>
			</view>
			<u-empty v-if="tab_list[current].list.length==0" textSize='30' mode="data" width="200" height="200"
				icon="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E6%95%B0%E6%8D%AE%E4%B8%BA%E7%A9%BA.png">
			</u-empty>
		</view>
		<u-picker :show="showpicker" :defaultIndex="picker.defaultIndex" @close="cancel" closeOnClickOverlay
			:columns="picker.array" :itemHeight="80" :title="picker.label" @cancel="cancel" keyName="name"
			@confirm="confirm_prcker" :showToolbar="picker.showToolbar"></u-picker>
	</view>
</template>

<script>
	import {
		getUserLoveList,
		getUserAddList,
		getInquiryOutside
	} from '@/common/api.js'
	var date = new Date();
	var year = date.getFullYear();
	var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;

	// month < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1
	let time = year + '-' + month
	let years = []
	for (let i = year - 9; i <= year; i++) {
		years.push({
			name: i
		})
	}
	let months = []
	for (let i = 1; i <= 12; i++) {
		months.push({
			name: i
		})
	}
	export default {
		data() {
			return {
				list: [],
				showpicker: false,
				tab_list: [],
				startTime: time + '-01',
				endTime: this.getCountDays(),
				current: 0,
				picker_index: 0,
				time: time,
				picker: {
					array: [
						[]
					],
					defaultIndex: [0],
					label: '',
					showToolbar: false,
				},
				statement_list: [{
					name: '月报表'
				}, {
					name: '年报表'
				}],
				fall_love: [{
					name: '恋爱了',
					id:1
				}, {
					name: '分手了',
					id:2
				}]
			}
		},
		async onLoad() {
			try {
				if (uni.getStorageSync('user_info')) {
					let {
						isDeputy
					} = await uni.getStorageSync('user_info')
					if (isDeputy == 0) {
						this.tab_list = [{
							name: '询问次数表',
							list: [],
							id:1,
							formData: {
								page: 1,
								perPage: 15,
								startTime: time + '-01',
								endTime: this.getCountDays()
							}
						}, {
							name: '会员新增表',
							list: [],
							id:2,
							count:0,
							formData: {
								page: 1,
								perPage: 10,
								startTime: time + '-01',
								endTime: this.getCountDays()
							}
						}, {
							name: '恋爱表',
							list: [],
							id:3,
							count:0,
							formData: {
								page: 1,
								perPage: 15,
								type: 1,
								startTime: time + '-01',
								endTime: this.getCountDays()
							}
						}, {
							name: '结婚表',
							list: [],
							id:4,
							count:0,
							formData: {
								page: 1,
								type: 3,
								perPage: 15,
								startTime: time + '-01',
								endTime: this.getCountDays()
							},
						}]
					} else if (isDeputy == 1) {
						this.tab_list = [{
							name: '询问次数表',
							list: [],
							id:1,
							count:0,
							formData: {
								page: 1,
								perPage: 10,
								startTime: time + '-01',
								endTime: this.getCountDays()
							}
						}]
					}
					this.init()
				}
			} catch (e) {
				//TODO handle the exception
			}

			// this.tab_list[this.current].list=result.list
		},
		watch: {
			picker_index(val) {
				
				if (val == 0) {
					this.time = time
				} else {
					this.time = year
					
				}
			},
			current(val) {
				// if(this.tab_list[this.current].list.length>0){
				// 	return
				// }
				this.tab_list[this.current].formData.page = 1
				this.tab_list[this.current].list = []
				// this.$set(this.tab_list[this.current], formData, formData)
				this.init()
			},
		},
		onReachBottom() {
			// let {count,perPage,page}=this.tab_list[this.current]
			// if(page*perPage<count){
			// 	this.tab_list[this.current].page++
			// }else{
			// 	return
			// }
			this.init()
		},
		methods: {
			getCountDays() {
				// 获取当前月份
				// 将日期设置为32，表示自动计算为下个月的第几天（这取决于当前月份有多少天）
				// date.setDate(32);
				// console.log(date.getDate())
				var currentDate = new Date();
				// 获取当前月份
				var currentMonth = currentDate.getMonth();
				
				// 获取下一个月的第一天
				var nextMonthFirstDay = new Date(currentDate.getFullYear(), currentMonth + 1, 1);
				
				// 获取当前月份的最后一天
				var currentMonthLastDay = new Date(nextMonthFirstDay.getTime() - 1);
				var daysInCurrentMonth = currentMonthLastDay.getDate();
				console.log('aaa',time)
				console.log(time + '-' + daysInCurrentMonth)
				return time + '-' + daysInCurrentMonth;
			},
			//会员恋爱，分手了，幸福统计表
			get_UserLoveList(data,id) {
				return new Promise((resolve, reject) => {
					getUserLoveList(data, {
						custom: {
							auth: false,
							toast: false,
							catch: false
						}
					}).then((result) => {
						result.id=id
						resolve(result)
					}).catch((err) => {
						reject(err)
					})
				})
			},
			async init() {

				let {
					name,
					list,
					count,
					formData,
					id,
				} = this.tab_list[this.current]
				// let formDatas=formData
				formData.endTime = this.endTime
				formData.startTime = this.startTime
				// if(this.current==2){
				// 	formData.type=formData.type=='恋爱了'?1:2
				// }
				let data = {
					params: formData
				}
				let result = {}
				// this.current_tab(data)
				if (this.current == 0) {
					result = await this.get_InquiryOutside(data,id)
				} else if (this.current == 1) {
					result = await this.get_UserAddList(data,id)
				} else if (this.current == 2) {
					result = await this.get_UserLoveList(data,id)
				} else if (this.current == 3) {
					result = await this.get_UserLoveList(data,id)
				}
				
				list = [...list, ...result.list]
				if (result.list.length > 0) {
					formData.page++
				}
			let it=this.tab_list.filter((item,index)=>{
					if(item.id==result.id){
						item.list=list
						item.count=result.count
						return item
					   }
					
				})
				console.log(it)
				// this.tab_list=it
				this.$set(this.tab_list[this.current],list,it[0].list)
				
			},
			current_tab(data) {
				if (this.current == 0) {
					this.get_InquiryOutside(data)
				} else if (this.current == 1) {
					this.get_UserAddList(data)
				} else if (this.current == 2) {
					this.get_UserLoveList(data)
				} else if (this.current == 3) {
					this.get_UserLoveList(data)
				}
			},
			//会员新增报表
			get_UserAddList(data,id) {
				// let {
				return new Promise((resolve, reject) => {
					getUserAddList(data, {
						custom: {
							auth: false,
							toast: false,
							catch: false
						}
					}).then((result) => {
						result.id=id
						resolve(result)
					}).catch((err) => {
						reject(err)
					})
				})

			},
			//询问次数表
			get_InquiryOutside(data,id) {

				return new Promise((resolve, reject) => {
					getInquiryOutside(data, {
						custom: {
							auth: false,
							toast: false,
							catch: false
						}
					}).then((result) => {
						result.id=id
						resolve(result)
					}).catch((err) => {
						reject(err)
					})
				})
			},
			data_open() {
				this.showpicker = true
				
				let default_oIndex=0
				let default_iIndex=0
				if(this.time.toString().indexOf('-')==-1){
					years.map((item,index)=>{
						if(this.time==item.name){
							default_oIndex=index
							return default_oIndex
						}
					})
				}else{
					console.log(this.time)
					let index=this.time.indexOf('-')
					let txt=this.time.substr(0,index)
					
					let txt1=this.time.substr(index+1,this.time.length)
					console.log(txt1)
					years.map((item,index)=>{
						if(item.name==txt){
							default_oIndex=index
							return default_oIndex
						}
					})
					months.map((item,index)=>{
						console.log(item)
						if(item.name==Number(txt1)){
							default_iIndex=index
							return default_iIndex
						}
					})
				}
				// years.map(item=>{
				// 	if(item==year)
				// })
				if (this.picker_index == 0) {
					this.picker.label = '月份选择'
					this.picker.array = [years, months]
					console.log(	this.picker.array)
					// if(this.picker.defaultIndex==[0,0])
					this.picker.defaultIndex = [default_oIndex, default_iIndex]
					console.log(this.picker.defaultIndex)
				} else if (this.picker_index == 1) {
					this.picker.label = '年份选择'
					this.picker.array = [years]
					this.picker.defaultIndex = [default_oIndex]
				}
			},
			statement(item) {
				this.showpicker = true
				this.picker.label = item
				
				if (item == '报表选择') {
					// this.picker.defaultIndex = [10, Number(month)]
					this.picker.array = [this.statement_list]
					this.picker.defaultIndex = [this.picker_index]
				} else if (item == '恋爱表') {
					this.picker.array = [this.fall_love]
					// let formData_type=''
					// if(this.tab_list[this.current]['formData'].type==1){
					// 	formData_type='恋爱了'
					// }else if(this.tab_list[this.current]['formData'].type==2){
					// 	formData_type='分手了'
					// }
					this.fall_love.forEach((it, index) => {
						if (it.id ==this.tab_list[this.current]['formData'].type) {
							this.picker.defaultIndex = [index]
							return
						}
					})
					// this.picker.defaultIndex = [10, Number(month)]
				}
				// if(this.)
			},
			getMonthDay(year, month) {
			  let da_ys = new Date(year, month, 0).getDate()
			  return da_ys
			},
			confirm_prcker(e) {

				// if (e.indexs[0] == this.picker_index) {
				// 	this.cancel()
				// 	return
				// }
				let day_s=''
				if(e.indexs.length>1){
					day_s=e.value[1].name>=10?e.value[1].name:'0'+e.value[1].name
				}
				// 
				let {
					name,
					list,
					count,
					formData
				} = this.tab_list[this.current]
				if (this.picker.label == '报表选择') {
					console.log('报表选择1')
					// this.time='122'
					this.picker_index = e.indexs[0]
					if (this.picker_index == 0) {
						this.startTime = year+'-'+month+'-01'
						this.endTime = this.getCountDays()
					} else if (this.picker_index == 1) {
						this.startTime = year + '-01' + '-01'
						this.endTime = year + '-12' + '-31'
					}
					
				} else if (this.picker.label == '年份选择' || this.picker.label == '月份选择') {
					
					if (e.value.length == 1) {
						console.log(e.value[0].name)
						this.time = e.value[0].name
						this.startTime = e.value[0].name + '-01' + '-01'
						this.endTime = e.value[0].name + '-12' + '-31'
					} else {
						// date.setDate(32);
						
						this.time = e.value[0].name + '-' + day_s
						this.startTime = e.value[0].name + '-' + day_s + '-01'
						this.endTime =  e.value[0].name +'-'+day_s+'-'+this.getMonthDay(e.value[0].name,e.value[1].name)
					}
				} else if (this.picker.label == '恋爱表') {
					formData.type = e.value[0].id
				}
				
				this.tab_list[this.current].formData.page = 1
				this.tab_list[this.current].list = []
				this.$set(this.tab_list[this.current], formData, formData)
				this.init()
				this.cancel()
			},
			cancel() {
				this.showpicker = false
			},
			click(e) {
				if (e.index == this.current) return;
				this.current = e.index
			},

		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		/deep/ .u-tabs {
			background-color: #fff;
		}

		/deep/ .tabs__wrapper__nav__item {
			padding: 0;
		}

		/deep/ .u-tabs__wrapper__nav__item {
			padding: 0;
		}

		.collapse {
			height: 91rpx;
			background: #F4F5F7;

			.collapse_item {
				padding: 0 30rpx;
				box-sizing: border-box;
				align-items: center;
				margin-right: 58rpx;

				&:last-child {
					margin-right: 0;
				}

				text {
					font-size: 28rpx;
					color: #000000;
				}

				.arrow-icon {
					width: 20rpx;
					height: 12rpx;
					margin-left: 15rpx;
				}
			}
		}

		.main {
			margin-top: 182rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			.table_item {
				height: 102rpx;
				padding: 0 41rpx 0 35rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 20rpx;
				align-items: center;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				text {
					color: #000000;
					font-size: 30rpx;

					&.gray {
						color: #AAAAAA;
						font-size: 28rpx;
					}
				}

			}

			.table_item_two {
				background-color: #fff;
				padding: 0 33rpx 0 32rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				border-radius: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.item-title {
					padding: 31rpx 0;
					box-sizing: border-box;

					text {
						&:first-child {
							font-weight: bold;
							font-size: 36rpx;
							color: #111111
						}

						&:last-child {
							font-size: 34rpx;
							color: #F46924;

						}
					}
				}

				.item-bottom {
					padding: 31rpx 0;
					box-sizing: border-box;

					.item-center {
						align-items: center;

						text {
							&:last-child {
								font-size: 28rpx;
								color: #111111;
							}

							&:first-child {
								font-size: 34rpx;
								color: #000000;
								font-weight: bold;
							}
						}
					}

				}
			}
		}
	}
</style>
